<template>
  <view class="identity">
    <view class="top">
      <text v-if="type == 'person'">身份证</text>
      <text v-else>加盟认证资料</text>
    </view>
    <view class="cont">
      <view class="cont-list" :style="sfBg">
        <!-- ident 高亮类名 -->
      </view>
      <view class="cont-list" :style="zzBg" v-if="type == 'enterprise'" @click="gotoLicense">
        <!-- senior 高亮类名 -->
      </view>
    </view>
    <block v-if="type == 'enterprise'">
      <view class="agree">
        <label class="radio" @tap="isAgree">
          <radio :value="isCheck" :checked="isCheck === '1'" color="#434343" class="agree-radio"/>我已阅读并同意<text>《加盟入驻协议》</text>
        </label>
      </view>
    </block>
    <view class="footer">
      <!-- 身份和资质认证完成后展示 -->
      <button type="primary" class="sub-btn yellow" :class="{miniBtn: allInfo.rank && allInfo.rank !== 4 && !isRecompose}" plain="true" @click="gotoPage">上传凭证</button>
      <button type="primary" class="miniBtn block" plain="true" v-if="allInfo.rank && allInfo.rank !== 4 && !isRecompose" @click="toPay">线上支付</button>
    </view>
    <!-- 协议弹窗 -->
    <uni-popup class="join-pop" ref="agreement" type="center" :maskClick="false" :show="true">
      <view class="pop-box">
        <view class="pop-box-cont">
          <view>是否已阅读并</view>
          <view>同意《加盟入驻协议》</view>
        </view>
        <view class="sub-btn">
          <button type="primary" class="block" @click="agree">同意</button>
          <button type="primary" class="gray" @click="closePop">不同意</button>  
        </view>
      </view>
    </uni-popup>
    <view>
      <uni-fab
        :pattern="pattern"
        :content="content"
        :horizontal="horizontal"
        :direction="direction"
        @trigger="trigger"
      ></uni-fab>
    </view>
  </view>
</template>
<script>
import {uniPopup} from "@dcloudio/uni-ui"
import { saveInfo, getModify } from "@/service/join/join.service.js"
import {getJoinStatus} from './common.js' // 获取审核结果的接口
import uniFab from '@/components/uni-fab/uni-fab.vue';
import { logoutApi } from '@/service/user/user.service.js'
export default {
  data() {
    return {
      getUserComposeInfo: null, // 获取被驳回存储的信息
      getUserJoinInfo: null, // 获取存储的信息
      personLine: false,
      licenLine: false,
      allInfo: null,
      isCheck: '0', // 是否同意登录注册协议 0：不同意 1：同意
      type: null, // 加盟的类型 person=>个人申请  enterprise=>企业申请
      sfBg: {},
      zzBg: {},
      isRecompose: false, // 是否初次申请
      horizontal: 'right',
      direction: 'horizontal',
      pattern: {
        color: '#FFFFFF',
        backgroundColor: 'rgba(0,0,0,0.5)',
        selectedColor: '#007AFF',
        buttonColor:"#434343"
      },
      content: [
        {
          iconPath: '../../static/image/icon/loginout.png', // 图片路径
          text: '安全退出',
          active: false
        }
      ]
    }
  },
  components: {uniPopup, uniFab},
  onLoad: function(option){
    this.type = option.type;
    this.personLine = option.isId && option.isId == 1 ? true : false;
    this.licenLine = option.isLic && option.isLic == 1 ? true : false;
  },
  mounted() {
    this.initDraw()
    this.setStyle()
  },
  activated () {
    this.initDraw()
  },
  methods: {
    trigger(e) {
      if (e.index == 0) { // 购物车
        logoutApi({}, res => {
          if (res.status == 0) {
            uni.showToast({
              title: '登出成功！',
              success: () => {
                setTimeout(function () {
                  uni.clearStorageSync();
                 
                }, 2000);
              }
            })
          }
        }, null, {showErrorMsg: true});
      }
    },
    initDraw () {
      this.getUserJoinInfo = uni.getStorageSync('joinInfo');
      this.getUserComposeInfo = uni.getStorageSync('recomposeDatas');
      if (this.getUserJoinInfo) {
        this.allInfo = this.getUserJoinInfo;
      }
      if (this.getUserComposeInfo) {
        this.isRecompose = true;
        this.allInfo = this.getUserComposeInfo;
      }
      if (!this.getUserJoinInfo && !this.getUserComposeInfo) {
        getJoinStatus((data)=>{ // 校验是否申请过加盟
          if (data == 'null' || data == 2 || data == 3) {
            uni.showToast({
              title: '请先选择加盟类型',
              icon: 'none',
              duration: 2000,
              success: () => {
                setTimeout(() => {
                  uni.navigateTo({
                    url: '/pages/join/index'
                  })
                }, 2000);
              }
            });
            return false;
          } else if (data != 1) {
            uni.showToast({
              title: '已提交申请',
              icon: 'none',
              duration: 2000,
              success: () => {
                setTimeout(() => {
                  uni.navigateTo({
                    url: '/pages/join/result'
                  })
                }, 2000);
              }
            });
            return false
          }
        });
      }
    },
    toPay () {
      let type = this.type == 'person' ? 1 : 0;
      if (this.type != 'person') { // 企业申请
        if (!this.licenLine) {
          uni.showToast({
            title: '请先完成资质认证',
            icon: 'none'
          });
          return false;
        }
        if (this.isCheck == '0') {
          this.$refs.agreement.open();
          return false
        }
      }
      let params = {
        realname: this.allInfo.realname,
        idCardNumber: this.allInfo.idCardNumber,
        idCardImage1: this.allInfo.idCardImage1,
        idCardImage2: this.allInfo.idCardImage2,
        rank: this.allInfo.rank,
        joinType: type, // 加盟类型
        appliedType: 2, // 申请类型(1名额添加，2付费加盟，3代上传)
        onlinePay: 1 // 1==>是线上支付  0==>不是线上支付
      }
      if (this.type != 'person') {
        params['storeName'] = this.allInfo.storeName;
        params['businessLicenseFileId'] = this.allInfo.businessLicenseFileId;
        params['businessAddress'] = this.allInfo.address;
      }
      if (this.isRecompose) {
        let comDatas = {
          id: this.allInfo.joinId,
          onlinePay: 1
        }
        console.log(1111)
        payAgain(datas, res => {
          if (res.status == 0) {
            uni.showToast({
              title: '提交成功',
              icon: 'none'
            });
            uni.removeStorage({ // 清楚缓存
              key: 'recomposeDatas',
              success: function () {
                // 打开支付
                location.href = res.data.onlinePayUrl;
              }
            });
          } else {
            uni.showToast({
              title: res.msg,
              icon: 'none'
            });
          }
        })
      } else {
        saveInfo(params, (res) => {
          if (res.status == 0) {
            uni.showToast({
              title: '提交成功',
              icon: 'none'
            });
            uni.removeStorage({ // 清楚缓存
              key: 'joinInfo',
              success: function (e) {
                // 打开支付页面
                location.href = res.data.onlinePayUrl;
              }
            });
          } else {
            uni.showToast({
              title: res.msg,
              icon: 'none'
            });
          }
        })
      }
    },
    setStyle () {
      if (this.personLine || this.licenLine) {
        this.sfBg = {
          backgroundImage: 'url(' + this.$store.state.imgBaseUrl + '/sf_on.png)'
        };
      } else {
        this.sfBg = {
          backgroundImage: 'url(' + this.$store.state.imgBaseUrl + '/sf.png)'
        };
      }
      if (this.licenLine) {
        this.zzBg = {
          backgroundImage: 'url(' + this.$store.state.imgBaseUrl + '/zz_on.png)'
        };
      } else {
        this.zzBg = {
          backgroundImage: 'url(' + this.$store.state.imgBaseUrl + '/zz.png)'
        };
      }
    },
    gotoPage () {
      if (this.type == 'enterprise') {
        if (!this.licenLine) {
          uni.showToast({
            title: '请先完成资质认证',
            icon: 'none'
          });
          return false;
        }
        if (this.isCheck == '0') {
          this.$refs.agreement.open();
          return false
        }
      }
      uni.navigateTo({ // 上传凭证
        url: '/pages/join/updateCertificate?type=' + this.type
      })
    },
    isAgree () {
      this.isCheck = '1';
      this.$refs.agreement.open();
    },
    closePop () {
      this.isCheck = '0';
      this.$refs.agreement.close();
    },
    agree () {
      this.isCheck = '1';
      this.$refs.agreement.close();
    },
    gotoLicense () { // 跳转营业执照
      if (!this.licenLine) {
        uni.navigateTo({
          url: '/pages/join/updateLicense?type=' + this.type
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.identity {
  height: calc(100vh - 62rpx);
  background-color: #FFFFFF;
  padding: 62rpx 32rpx 0;
  .top {
    font-size: 36rpx;
    color: #666666;
  }
  .cont {
    .cont-list {
      width: 337rpx;
      height: 338rpx;
      margin: 82rpx auto 0;
      background-size: 100% 100%;
      background-repeat: no-repeat;
      &.ident {
      }
      &.senior {
      }
    }
  }
  .agree {
    color: #999999;
    font-size: 24rpx;
    text-align: center;
    margin: auto;
    position: absolute;
    bottom: 130rpx;
    left: 0;
    right: 0;
    .agree-radio {
      margin-right: 20rpx;
      vertical-align: text-top;
    }
    text {
      color: #C2AC78;
    }
    .uni-radio-input {
      width: 30rpx;
      height: 30rpx;
    }
  }
  .footer {
    width: 100%;
    border-top: 1px solid #E1E1E1;
    padding: 14rpx 0 20rpx;
    background-color: #FFFFFF;
    display: flex;
    justify-content: center;
    position: absolute;
    bottom: 0;
    left: 0;
    button {
      height: 70rpx;
      margin: 0 32rpx;
      line-height: 70rpx;
      font-size: 30rpx;
      border: none;
      &.sub-btn {
        width: 100%;
      }
      &.miniBtn {
        width: 320rpx;
      }
      &.yellow {
        color: #434343;
        background-color: #F6DA99;
      }
      &.block {
        background-color: #434343;
        color: #F6DA99;
      }
    }
  }
}
.pop-box {
    width: 500rpx;
    &-cont {
      font-size: 32rpx;
      line-height: 72rpx;
      color: #666666;
      text-align: center;
    }
    .sub-btn {
      padding: 0 50rpx;
      margin-top: 54rpx;
      button {
        height: 60rpx;
        line-height: 60rpx;
        font-size: 24rpx;
        border: none;
        &.block {
          color: #F6DA99;
          background-color: #434343;
          margin-bottom: 27rpx;
        }
        &.gray {
          color: #FFFFFF;
          background-color: #E1E1E1;
        }
      }
    }
  }

</style>
